<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>AnalysisDetail</title>

<meta
	content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
	name='viewport' />
<meta name="viewport" content="width=device-width" />

<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/hipster_cards.css" rel="stylesheet" />

<link rel="stylesheet" href="css/style.css" type="text/css">
<style>
body {
	background: rgb(238, 239, 241)
}

/*隐藏滚动条*/
html {
	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}

html::-webkit-scrollbar {
	width: 0px
}

.card {
	margin-bottom: 20px;
}

.container {
	padding-top: 20px;
}

.content {
	border-bottom: 1px solid rgb(231, 231, 231);
}

.card h5, 
.card .footer .description{
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: keep-all;
	white-space:nowrap;
}

.action {
	display: inline;
	float: right;
}

.panel-header {
	border: 1px solid transparent;
	border-radius: 1px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	border-color: #dedede;
}

#searchBar {
	border-color: #f2f2f2;
	border-radius: 0px;
	display: inline-block;
	color: black;
	width: 200px;
	height: 100%;
}

#searchButton {
	display: inline-block;
	height: 100%;
	width: 70px;
	vertical-align: top;
}

.headerButton {
	margin-left: 20px;
}
</style>
</head>

<body>

	<div class="wrapper">
		<div class="container">

			<div class="totalHeader"
				style="width:100%;background:rgb(250,250,250);margin-bottom:20px">
				<div style="padding:10px 10px 10px 30px;width:100%;height:60px;">
					<input id="searchBar" type="text" class="form-control"
						style="font-size:20px">

					<button type="button" id="search" class="btn btn-warning headerButton">
						<span class="glyphicon glyphicon-search" style="padding-right:5px">
						</span> 搜索
					</button>

					<button type="button" id="follow" class="btn btn-info headerButton">
						<span class="glyphicon glyphicon-heart-empty"
							style="padding-right:5px"> </span> 关注
					</button>
				</div>

			</div>
			<!--热度指数趋势模块-->
			<div class="heat">
				<div class="panel" id="heatTrend">
					<div class="panel-header" style="background:rgb(250,250,250)">

						<h3 id="header"
							style="padding-left:30px;font-size:20px;display: inline-block">热度指数趋势</h3>

						<div id='wrapper' style="display: inline-block;">
							<form class="time-container">
								<select id="time1" class='custom-date' name='select'">
									<option selected='selected' value='7'>7 天</option>
									<option value='30'>30 天</option>
									<option value='90'>90 天</option>
									<option value='180'>180 天</option>
									<option value='365'>365 天</option>
									<option value='custom'>自定义</option>
								</select>
							</form>
						</div>
						<div
							style="display: inline-block;float:right;padding-top:20px;padding-right:20px">
							<a data-toggle="collapse" href="#collapseList1"
								style="color:black;"> <span
								class="glyphicon glyphicon-chevron-down"></span>
							</a>
						</div>
					</div>
					<div id="collapseList1"
						class="panel-collapse collapse panel-body in">

						<div class="heatPic">
							<div class="chart-box" id="heatValue"
								style="width: 58%;margin-right:2%;height:400px;display:inline-block;border-right:solid 1px rgb(227, 227, 226)"></div>
							<div class="side-info"
								style="width:38%;height:400px;display:inline-block"></div>
						</div>
					</div>
				</div>

				<div class="panel" id="heatContent">
					<div class="panel-header" style="background:rgb(250,250,250)">
						<h3 id="header"
							style="padding-left:30px;font-size:20px;display: inline-block">热点舆情</h3>

						<!-- <div id='wrapper' style="display: inline-block;">
							<form>
								<select id="time2" class='custom-date' name='select'>
									<option selected='selected' value='7'>7 天</option>
									<option value='30'>30 天</option>
									<option value='90'>90 天</option>
									<option value='180'>180 天</option>
									<option value='365'>365 天</option>
									<option value='custom'>自定义</option>
								</select>
							</form>
						</div> -->
						<div
							style="display: inline-block;float:right;padding-top:20px;padding-right:20px">
							<a data-toggle="collapse" href="#collapseList2"
								style="color:black;"> <span
								class="glyphicon glyphicon-chevron-down"></span>
							</a>
						</div>
					</div>
					<div id="collapseList2"
						class="panel-collapse collapse panel-body in">
						<div class="card-containers" style="width:100%;display: inline-block">

						</div>

						<div class="pagination-container" class="panel-footers"
							style="display: inline-block;float:right">
							<ul class='pagination' style='margin:0;float:right'>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<!--来源分布模块-->
			<div class="source">
				<div class="panel" id="mediaSource">
					<div class="panel-header" style="background:rgb(250,250,250)">
						<h3 id="header"
							style="padding-left:30px;font-size:20px;display: inline-block">媒体分布</h3>

						<div
							style="display: inline-block;float:right;padding-top:20px;padding-right:20px">
							<a data-toggle="collapse" href="#collapseList3"
								style="color:black;"> <span
								class="glyphicon glyphicon-chevron-down"></span>
							</a>
						</div>
					</div>
					<div id="collapseList3"
						class="panel-collapse collapse panel-body in">
						<div class="masonry-container">
							<div class="heatPic">
								<div class="chart-box" id="sourcePie"
									style="width: 58%;margin-right:2%;height:400px;display:inline-block;border-right:solid 1px rgb(227, 227, 226)"></div>
								<div class="side-info"
									style="width:38%;height:400px;display:inline-block;overflow:auto"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--关键词分析模块-->
			<div class="keywords" style="width:100%;display: inline-block">
				<div class="panel" id="wordcloud"
					style="width:48%;display:inline-block;float:left;">
					<div class="panel-header" style="background:rgb(250,250,250)">
						<h3 id="header"
							style="padding-left:30px;font-size:20px;display: inline-block">关键词云</h3>

						<div
							style="display: inline-block;float:right;padding-top:20px;padding-right:20px">
							<a data-toggle="collapse" href="#collapseList5"
								style="color:black;"> <span
								class="glyphicon glyphicon-chevron-down"></span>
							</a>
						</div>
					</div>
					<div id="collapseList5"
						class="panel-collapse collapse panel-body in">
						<div class="heatPic">
							<div class="chart-box" id="wordCloud"
								style="width: 100%;height:300px;"></div>
						</div>
					</div>
				</div>
				<div class="panel" id="relation"
					style="width:48%;display:none;float:right;">
					<div class="panel-header" style="background:rgb(250,250,250)">
						<h3 id="header"
							style="padding-left:30px;font-size:20px;display: inline-block">关联词分析</h3>

						<div
							style="display: inline-block;float:right;padding-top:20px;padding-right:20px">
							<a data-toggle="collapse" href="#collapseList6"
								style="color:black;"> <span
								class="glyphicon glyphicon-chevron-down"></span>
							</a>
						</div>
					</div>
					<div id="collapseList6"
						class="panel-collapse collapse panel-body in">
						<div class="heatPic">
							<div class="chart-box" id="relationPic"
								style="width: 100%;height:300px;"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- end wrapper -->
</body>

<script src="js/jquery.js " type="text/javascript "></script>
<script src="js/bootstrap.min.js " type="text/javascript "></script>
<script src="js/hipster-cards.js " type="text/javascript" ></script>
<script src="js/index.js" type="text/javascript"></script>
<script src="js/echarts.min.js" type="text/javascript"></script>
<script src="js/echarts-wordcloud.min.js" type="text/javascript"></script>
<script src="js/jquery.tmpl.min.js" type="text/javascript"></script>

<!-- div模块模板 -->
<script id="div_demo" type="text/x-jquery-tmpl">
            <div class="card-container active-container">
                {{each(i,news) data}}
                    <div id="${news.id}" class="card-box col-md-3 col-sm-6">
                            <div class="card">
                                <div class="content">
                                    <h5 class="title">
                                        <a href="#" data-target="${news.url}" onclick="view(this)" title="${news.title}">${news.title}</a>
                                    </h5>
                                    <p class="description" style="word-wrap:break-word">
										{{if news.content.replace(/\s/g,"").length>100}}
											${news.content.replace(/\s/g,"").substring(0,100)}...
										{{else}}
											${news.content.replace(/\s/g,"")}...
										{{/if}}
									</p>
                                    <p class="description">${news.date}</p>
                                </div>
                
                                <div class="footer" style="padding-top:10px">
                                    <p class="description newsSource" style="display: inline">#${news.source}</p>
                                    <div class="action">
                                        <button type="button" button-type="book" class="btn btn-primary btn-xs" onclick="collect(this)">
                                            <span class="glyphicon glyphicon-star-empty"></span> 收藏
                                        </button>
                                    </div>
                
                                </div>
                            </div>
                    </div>
                {{/each}}
            </div>
</script>



<!--分页菜单-->
<script>
	var fillHTML = function(totalsubpageTmep, args) {
		totalsubpageTmep = "";
		// 页码大于等于4的时候，添加第一个页码元素
		if (args.currPage != 1 && args.currPage >= 4 && args.totalPage != 4) {
			totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >" + 1 + "</a></li>";
		}
		/* 当前页码>4, 并且<=总页码，总页码>5，添加“···”*/
		if (args.currPage - 2 > 2 && args.currPage <= args.totalPage && args.totalPage > 5) {
			totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>";
		}
		/* 当前页码的前两页 */
		var start = args.currPage - 2;
		/* 当前页码的后两页 */
		var end = args.currPage + 2;

		if ((start > 1 && args.currPage < 4) || args.currPage == 1) {
			end++;
		}
		if (args.currPage > args.totalPage - 4 && args.currPage >= args.totalPage) {
			start--;
		}
		for (; start <= end; start++) {
			if (start <= args.totalPage && start >= 1) {
				totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >" + start + "</a></li>";
			}
		}
		if (args.currPage + 2 < args.totalPage - 1 && args.currPage >= 1 && args.totalPage > 5) {
			totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_' data-go='' >...</a></li>";
		}

		if (args.currPage != args.totalPage && args.currPage < args.totalPage - 2 && args.totalPage != 4) {
			totalsubpageTmep += "<li class='ali'><a href='javascript:void(0);' class='geraltTb_pager' data-go='' >" + args.totalPage + "</a></li>";
		}

		//当前页数
		var temp = $(totalsubpageTmep).each(function() {
			if ($(this).text() == args.currPage) {
				$(this).find("a").css("background", "rgb(250,250,250)");
			}
		});
		$(".pagination").html(temp);
	}
	var bindEvent = function(totalsubpageTmep, args) {
		totalsubpageTmep.on("click", "a.geraltTb_pager", function(event) {
			var current = parseInt($(this).text());
			fillHTML(totalsubpageTmep, {
				"currPage" : current,
				"totalPage" : args.totalPage,
				"turndown" : args.turndown
			});
			if (typeof (args.backFn) == "function") {
				args.backFn(current);
			}
		});
	}
	$.fn.createPage = function(options) {
		fillHTML(this, options);
		bindEvent(this, options);
	}
</script>

<!--折线图-->
<script>
	//热度指数折线图
	function drawHeatValue(ele, x, flows, start, end) {
		var chart = echarts.init(ele);
		var duration = start + "——" + end;
		var displayedLegend = [];
		var optionYSeries = [];
		var optionSeries = [];

		var startTime = new Date(x[0]);
		var endTime = new Date(x[x.length - 1]);

		var flowFloor = 0;
		var flowCeil = 1;
		try {
			var flowMax = flows[0]['value'][1];
			var flowMin = flows[0]['value'][1];
			flows.map(function(i) {
				if (i['value'][1] < flowMin)
					flowMin = i['value'][1];
				if (i['value'][1] > flowMax)
					flowMax = i['value'][1];
			});

			flowFloor = Math.floor((flowMin - (flowMax != flowMin ? (flowMax - flowMin) : flowMin) / 8) * 1000) / 1000;
			flowCeil = Math.ceil((flowMax + (flowMax != flowMin ? (flowMax - flowMin) : flowMin) / 8) * 1000) / 1000;
			if (flowFloor < 0)
				flowFloor = 0;
		} catch (e) {}

		option = {
			title : {
				text : duration + " 热度指数",
				left : 'center'
			},
			tooltip : {
				axisPointer : {
					snap : true
				},
				trigger : 'axis',
				formatter : function(params, index) {
					var result = "日期:" + params[0].data['value'][0].substring(0, 10);

					if (params[0] != undefined && params[0].data != undefined) {
						result += "<br/>热度指数:" + params[0].data['value'][1];
					}
					return result;
				}
			},
			dataZoom : [ {
				startValue : new Date(startTime.valueOf() - 24 * 1 * 60 * 60 * 1000),
				endValue : new Date(endTime.valueOf() + 24 * 1 * 60 * 60 * 1000)
			}, {
				type : 'inside'
			} ],
			xAxis : {
				type : 'time',
				min : new Date(new Date(start).valueOf() - 24 * 2 * 60 * 60 * 1000),
				max : new Date(new Date(end).valueOf() + 24 * 2 * 60 * 60 * 1000),
				splitLine : {
					show : false
				}
			},
			yAxis : {
				name : '热度指数',
				type : 'value',
				max : flowCeil,
				min : flowFloor,
				splitLine : {
					show : false
				}
			},
			series : [ {
				name : '热度指数',
				type : 'line',
				symbol : 'circle',
				itemStyle : {
					normal : {
						color : 'red',
						lineStyle : {
							color : 'red'
						}
					}
				},
				data : flows
			} ]
		};

		chart.setOption(option);
	}

	function drawSourcePie(ele, datas, legends) {
		var chart = echarts.init(ele);
		option = {
			tooltip : {
				trigger : 'item',
				formatter : "{a} <br/>{b}: {d}%"
			},
			series : [
				{
					name : null,
					type : 'pie',
					radius : '55%',
					center : [ '50%', '50%' ],
					data : datas,
					itemStyle : {
						emphasis : {
							shadowBlur : 10,
							shadowOffsetX : 0,
							shadowColor : 'rgba(0, 0, 0, 0.5)'
						}
					}
				}
			]
		};
		chart.setOption(option);
	}

	function drawWordCloud(ele, datas) {
		var chart = echarts.init(ele);

		var option = {
			tooltip : {},
			series : [ {
				type : 'wordCloud',
				gridSize : 8,
				size : [ '80%', '100%' ],
				sizeRange : [ 16, 48 ],
				rotationRange : [ -90, 90 ],
				rotationStep : 45,
				width : '100%',
				height : '100%',
				autoSize : {
					enable : true,
					minSize : 16
				},
				textStyle : {
					normal : {
						color : function() {
							return 'rgb('
								+ [ Math.round(Math.random() * 160),
									Math.round(Math.random() * 160),
									Math.round(Math.random() * 160) ]
									.join(',') + ')';
						}
					},
					emphasis : {
						shadowBlur : 10,
						shadowColor : '#333'
					}
				},
				data : datas
			} ]
		};

		chart.setOption(option);
	}
	
	function drawRelationPic(ele,datas){
		var chart = echarts.init(ele);
		
	}
	
	var draw = function(type, resultJson, startTime, endTime) {

		//画图
		if (type == "heat") {
			var times = new Array();
			var flows = new Array();
			for (var item in resultJson.data) {
				var time = item;
				var flow = resultJson.data[time];

				if (flow == 0) {
					continue;
				}
				times.push(time);

				var tempData = new Object();
				tempData['name'] = new Date(time).toString();
				var value = [ time, flow ];
				tempData['value'] = value;

				flows.push(tempData);
			}
			//时间正序排序
			var flows = flows.sort(function(a, b) {
				return Date.parse(a.name) - Date.parse(b.name);
			});
			drawHeatValue(document.getElementById('heatValue'), times, flows, startTime, endTime);
			drawTop5HeatTable(flows);
		} else if (type == "media") {
			var datas = new Array();
			var speDatas=new Array();
			var legends = new Array();
			
			var dataArray=resultJson.data;
			for (var i=0;i<dataArray.length;i++) {
				var temp=dataArray[i];
				var source = temp.source;
				var percent = temp.ratio;
				var count=temp.count;
				
				legends.push(source);
				
				var tempData = new Object();
				tempData['name'] = source;
				tempData['value'] = percent;

				datas.push(tempData);
				
				tempData['count']=count;
				speDatas.push(tempData);
			}
			drawSourcePie(document.getElementById("sourcePie"), datas, legends);
			drawSourcePieValue(speDatas);
		} else if (type == "wordCloud") {
			var datas = new Array();

			for (var item in resultJson.data) {
				var word = item;
				var frequency = resultJson.data[word];

				var tempData = new Object();
				tempData['name'] = word;
				tempData['value'] = frequency;

				datas.push(tempData);
			}

			drawWordCloud(document.getElementById("wordCloud"), datas);
		}else if (type == "relationPic") {
			var datas = new Array();

			for (var item in resultJson.data) {
				var word = item;
				var frequency = resultJson.data[word];

				var tempData = new Object();
				tempData['name'] = word;
				tempData['value'] = frequency;

				datas.push(tempData);
			}

			drawRelationPic(document.getElementById("relationPic"), datas);
		}


	}
</script>


<script>
	var drawTop5HeatTable = function(data) {
		
		$(".side-info").eq(0).empty();
		var data = data.sort(function(a, b) {
			return b.value[1] - a.value[1];
		})
		var table = '<table class="table table-hover">' +
			'<thead>' +
			'<tr>' +
			'<th colspan="2">热度爆发时间TOP5</th>' +
			'</tr>' +
			'<tr>' +
			'<th>时间</th>' +
			'<th>热度指数</th>' +
			'</tr>' +
			'</thead>' +
			'<tbody>';

		for (var i = 0; i < (data.length > 5 ? 5 : data.length); i++) {
			var time = data[i].value[0];
			var value = data[i].value[1];

			var tableRow = "<tr><td>" + time + "</td><td>" + value + "</td></tr>";
			table += tableRow;
		}
		table += "</tbody></table>";
		$(".side-info").eq(0).append($(table));
	}

	var drawSourcePieValue = function(data) {
		$(".side-info").eq(1).empty();
		var data = data.sort(function(a, b) {
			return b.value - a.value;
		});
		var table = '<table class="table table-hover">' +
			'<thead>' +
			'<tr>' +
			'<th colspan="3">媒体来源</th>' +
			'</tr>' +
			'<tr>' +
			'<th>媒体</th>' +
			'<th>舆情贡献量</th>' +
			'<th>占比</th>'
		'</tr>' +
		'</thead>' +
		'<tbody>';

		for (var i = 0; i < (data.length); i++) {
			var time = data[i].name;
			var value = data[i].value;
			var count=data[i].count;
			
			var tableRow = "<tr><td>" + time + "</td><td>"+count+"</td><td>" + (value * 100).toFixed(2) + "%</td></tr>";
			table += tableRow;
		}
		$(".side-info").eq(1).append($(table));
	}
</script>
<script>
	var collect = function (button) {
        var thisButton = $(button);
        var cardbox = thisButton.parents(".card-box");
        var id=cardbox.attr("id");
        var url="/POSystem/UpdateCollectionServlet?userid="+localStorage.getItem("userid")+"&newsid="+id+"&mode=";
        
        if (thisButton.attr("button-type") == "book") {
        	var icon=thisButton.find("span");
        	if(icon.hasClass("glyphicon-star-empty")){
        		icon.removeClass("glyphicon-star-empty");
        		icon.addClass("glyphicon-star");
        		
        		url+="add";
        	}
        	else{
        		icon.removeClass("glyphicon-star");
        		icon.addClass("glyphicon-star-empty");
        		
        		url+="delete";
        	}
        	
        	$.get(url);
        }
    }
    
    var view = function(url) {
		var thisURL = $(url);
		var cardbox = thisURL.parents(".card-box");
		var id = cardbox.attr("id");
		var url = "/POSystem/UpdateViewServlet?userid=" + localStorage.getItem("userid") + "&newsid=" + id + "&mode=add";
		$.get(url);
		
		var target=thisURL.attr("data-target");
		top.location.href= target;
	}
	
	var viewKeyword=function(keyword){
		var userid = localStorage.getItem("userid");
		var url="/POSystem/ViewKeywordServlet?userid=" + userid;
		
		$.get(url,function(data){
			var dataJson=JSON.parse(data);
			var dataArray=dataJson.data;
			
			var index = $.inArray(keyword,dataArray);
			//存在于数组中
    		if(index >= 0){
    			$("#follow").find("span").removeClass("glyphicon-heart-empty");
    			$("#follow").find("span").addClass("glyphicon-heart");
    		}
		});
	}
	
	var viewCollection=function(){
		var userid = localStorage.getItem("userid");
		var url="/POSystem/ViewCollectionServlet?userid=" + userid;
		
		$.get(url,function(data){
			var dataJson=JSON.parse(data);
			var dataArray=dataJson.data;
			for(var i=0;i<dataArray.length;i++){
				var id=dataArray[i].id;
				if($("#"+id).find(".action span").eq(0)!=undefined){
					$("#"+id).find(".action span").eq(0).removeClass("glyphicon-star-empty");
					$("#"+id).find(".action span").eq(0).addClass("glyphicon-star");
				}
			}
		});
	}
	
	var changeTitleSize = function() {
		var firstContent=$(".active-container").find(".content").eq(0);
		var firstFooter=firstContent.next();
		
		var tempWidth = firstContent.width();
		$("h5").css("width", tempWidth);
		
		var actionWidth=firstFooter.find(".action").eq(0).width()+5;
		$(".newsSource").css("width",tempWidth-actionWidth);
	}

	var changeBoxHeight=function(){
		var tempHeight=$(".active-container .card-box")[0].getBoundingClientRect().height;
		$(".active-container .card-box").each(function(){
			if($(this).height()!=tempHeight){
				$(this).height(tempHeight);
			}
		});
	}
	
	var changeIconType = function(button) {
		var thisButton = $(button);
		var cardbox = thisButton.parents(".card-box");
		console.log(cardbox.attr("id"));
		if (thisButton.attr("button-type") == "book") {
			thisButton.find("span").toggleClass("glyphicon-star-empty");
			thisButton.find("span").toggleClass("glyphicon-star");
		} else if (thisButton.attr("button-type") == "like") {
			thisButton.find("span").toggleClass("glyphicon-heart-empty");
			thisButton.find("span").toggleClass("glyphicon-heart");
		}
	}
	//新闻标题大小随页面大小变化而变化
	$(window).resize(changeTitleSize);

	function formatTime(date) {
		var year = date.getFullYear();
		var month = date.getMonth() + 1,
			month = month < 10 ? '0' + month : month;
		var day = date.getDate(),
			day = day < 10 ? '0' + day : day;
		return year + '-' + month + '-' + day;
	}
	var getHeatValue = function(keyword) {
		var duration = $("#time1").find("option:selected").val();
		var startTime,
			endTime;
		//自定义时间范围
		if (duration == "custom") {
			var timeRange = $("#time1").find("option:selected").text();
			startTime = timeRange.substring(0, 10);
			endTime = timeRange.substring(13, 23);

		} else {

			var end = new Date();
			endTime = formatTime(end);

			var start = new Date(end.setDate(end.getDate() - duration));
			startTime = formatTime(start);
		}
		
		//console.log("Start from: " + startTime + " and End at: " + endTime);
		//var jsonString='{"status":1,"message":"获取成功","data":{"2018-07-30":0.0335,"2018-08-01":0.0,"2018-07-31":0.0391,"2018-07-29":0.0}}';
		//var json=JSON.parse(jsonString);
		//draw("heat", json, startTime, endTime);
		$.ajax({
			type : "POST",
			url : "/POSystem/CalHotValueServlet",
			contentType : "application/x-www-form-urlencoded;charset=utf-8",
			data : {
				"keyword" : keyword,
				"startDate" : startTime,
				"endDate" : endTime
			},
			success : function(data) {
				var json = JSON.parse(data);
				draw("heat", json, startTime, endTime);
			}
		}); 
		

	};

	var getSourcePie = function(keyword) {
		var url="/POSystem/MediaServlet?keyword="+keyword;
		$.get(url,function(data){
			var json = JSON.parse(data);
			draw("media", json, null, null);
		});
		//var jsonString = '{"status":1,"message":"获取成功","data":{"澎湃新闻":0.0238,"中国青年报":0.0476,"人民论坛网":0.0238,"中国社会科学网":0.0238,"中国新闻网":0.381,"生命时报微信公众号":0.0238,"人民网":0.0476,"科技日报":0.0476,"经济日报":0.0238,"中新经纬":0.0238,"中国经济周刊":0.0238,"光明日报":0.0238,"法制日报":0.0238,"新华网":0.0238,"武汉晚报":0.1429,"央视新闻客户端":0.0238,"检察日报":0.0238,"人民日报":0.0476}}';
		//var json = JSON.parse(jsonString);
		//draw("media", json, null, null);
	}

	var getWordCloud = function(keyword) {
		var url="/POSystem/WordFrenquencyServlet?keyword="+keyword;
		$.get(url,function(data){
			var json=JSON.parse(data);
			draw("wordCloud",json,null,null);
		});
		//var jsonString = '{"status":1,"message":"success","data":{"疫苗":633,"公司":239,"月":264,"管理":111,"长生":208,"长春":205,"疾控中心":78,"工作":138,"百白破":130,"药品":95,"技术":65,"狂犬":269,"生物":129,"信息":102,"人用":72,"责任":86,"未":80,"火箭":78,"中":126,"武汉":116,"发展":69,"涉事":87,"企业":134,"服务":89,"监督":77,"预防":78,"合格":74,"中心":161,"公务":69,"高温":67,"接种":162,"批次":108,"国家":157,"采购":85,"发布":78,"控制":77,"日":212,"狂犬病":193,"生产":159,"有限":120,"消息":71,"研究":87,"称":71,"数据":76,"年":151,"相关":73,"时":73,"公务员":67,"中国":129,"�":124}}';
		//var json = JSON.parse(jsonString);
		//draw("wordCloud", json, null, null);
	}
	
	var getRelationPic=function(keyword){
		var jsonString = '{"status":1,"message":"success","data":{"疫苗":633,"公司":239,"月":264,"管理":111,"长生":208,"长春":205,"疾控中心":78,"工作":138,"百白破":130,"药品":95,"技术":65,"狂犬":269,"生物":129,"信息":102,"人用":72,"责任":86,"未":80,"火箭":78,"中":126,"武汉":116,"发展":69,"涉事":87,"企业":134,"服务":89,"监督":77,"预防":78,"合格":74,"中心":161,"公务":69,"高温":67,"接种":162,"批次":108,"国家":157,"采购":85,"发布":78,"控制":77,"日":212,"狂犬病":193,"生产":159,"有限":120,"消息":71,"研究":87,"称":71,"数据":76,"年":151,"相关":73,"时":73,"公务员":67,"中国":129,"�":124}}';
		var json = JSON.parse(jsonString);
		draw("relationPic", json, null, null);
	}
	
	var searchByKeyword=function(keyword){
		//清空
		$(".card-containers").empty();
		$(".time-container").empty();
		$(".pagination-container").empty();
		var time="<select id='time1' class='custom-date' name='select'>"+
									"<option selected='selected' value='7'>7 天</option>"+
									"<option value='30'>30 天</option>"+
									"<option value='90'>90 天</option>"+
									"<option value='180'>180 天</option>"+
									"<option value='365'>365 天</option>"+
									"<option value='custom'>自定义</option>"+
									"</select>";
		var pagination="<ul class='pagination' style='margin:0;float:right'></ul>";
		$(".time-container").append($(time));
		$(".pagination-container").append($(pagination));
		
		if(!$(".collapse").hasClass("in")){
			$(".collapse").addClass("in");
		}
		
		initTime($("#time1"));
		
		$("#searchBar").val(keyword);
		var url = "/POSystem/KeywordNewsServlet?keyword=" + keyword;
		var originUrl = url + "&page=" + "1";
		$.get(originUrl, function(data) {
			var dataJson = JSON.parse(data);
			console.log(dataJson);
			$('#div_demo').tmpl(dataJson).appendTo('.card-containers');
			$(".active-container").attr("id", "page1");
			//单个新闻标题自适应
			var titleSize = changeTitleSize();
			changeBoxHeight();
			viewCollection();
			
			var totalPage = Math.ceil(dataJson.count / 8);
			
			$(".pagination").createPage({
			totalPage : totalPage,
			currPage : 1,
			//点击反馈函数
			backFn : function(p) {
				var target = document.getElementById("page" + p);
				if (target == null) {
					var targetPage = p;
					var targetUrl = url + "&page=" + p;

					$.get(targetUrl, function(data) {
						var dataJson = JSON.parse(data);
						var curPage = $(".active-container").eq(0);
						curPage.removeClass("active-container");
						$('#div_demo').tmpl(dataJson).appendTo('.card-containers');
						curPage.slideUp(500);
						curPage = $(".active-container").eq(0);
						curPage.attr("id", "page" + p);

						curPage.slideDown(500);
						changeTitleSize();
						changeBoxHeight();
						viewCollection();
					});
				} else {
					var curPage = $(".active-container").eq(0);
					if (curPage.attr("id") != ("page" + p)) {
						curPage.removeClass("active-container");
						curPage.slideUp(500);

						var tarPage = $("#page" + p);
						tarPage.addClass("active-container");

						tarPage.slideDown(500);
						changeTitleSize();
						changeBoxHeight();
						viewCollection();
					}
				}

			}
		});
		});
		getHeatValue(keyword);
		getSourcePie(keyword);
		getWordCloud(keyword);
		getRelationPic(keyword);
		$(".side-info td").css("text-align", "center");
		$(".side-info th").css("text-align", "center");
		$("#time1").change(function() {
			getHeatValue(keyword);
		});
	}
	
	$().ready(function() {
		//获得查询关键词
		var keyword = window.parent.keyword;
		if (keyword == "" || keyword == undefined || keyword == null) {
			$(".collapse").removeClass("in");
		}
		else{
			searchByKeyword(keyword);
		}
		
		viewKeyword(keyword);
		
		//getRelationPic(keyword);
		
		$("#search").click(function(){
			var key=$("#searchBar").val();
			searchByKeyword(key);
			viewKeyword(key);
		});
		
		$("#follow").click(function(){
			var theKey=$("#searchBar").val();
        	var url="/POSystem/UpdateKeywordServlet?userid="+localStorage.getItem("userid")+"&keyword="+theKey+"&mode=";
        
        	
        	var icon=$(this).find("span");
        	if(icon.hasClass("glyphicon-heart-empty")){
        		icon.removeClass("glyphicon-heart-empty");
        		icon.addClass("glyphicon-heart");
        		
        		url+="add";
        	}
        	else{
        		icon.removeClass("glyphicon-heart");
        		icon.addClass("glyphicon-heart-empty");
        		
        		url+="delete";
        	}
        	
        	$.get(url);
		});
	});
</script>

</html>